<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    canvas {
        background: url(bg.jpg);
        background-size: cover;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        cursor: move;
    }
    </style>
</head>

<body>
    <canvas id="canvas" width="960" height="600"></canvas>
    <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var W = canvas.width;
    var H = canvas.height;
    var lineW = 200;
    var lineH = 30;
    var ballArr = [];
    var lineArr = [];

    function Ball() {
        this.w = 50;
        this.h = 50;
        this.x = W / 2 - 25;
        this.y = H / 2 - 25;
        this.vx = getRandom(-10, 10);
        this.vy = getRandom(-10, 10);
        this.r = 15;
        this.color = getColor();
        this.src = 'ball.png';
    }

    Ball.prototype = {
        draw: function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            ctx.fillStyle = this.color;
            ctx.fill();
        },
        update: function() {
            if (this.x < 0 || this.x > W) {
                this.vx = -this.vx;
            }
            if (this.y < 0 || this.y > H) {
                this.vy = -this.vy;
            }
            this.x += this.vx;
            this.y += this.vy;
            this.draw();
        }
    };
    createBall();

    function createBall() {
        var ball = new Ball();
        ballArr.push(ball);
        setInterval(function() {
            var ball = new Ball();
            ballArr.push(ball);
        }, 2000);
    }

    requestAnimationFrame(render);

    function render() {
        ctx.clearRect(0, 0, 960, 600);
        for (var item of ballArr) {
            item.update();
        }
        requestAnimationFrame(render);
    }


    var dir = {
        left: false,
        right: false,
        top: false,
        bottom: false
    };


    document.onkeydown = function(e) {
        var code = e.keyCode;
        if (code == 37) {
            dir.left = true;
        }
        if (code == 39) {
            dir.right = true

        }
        if (code == 38) {
            dir.top = true;

        }
        if (code == 40) {
            dir.bottom = true;
        }
    }

    document.onkeyup = function(e) {
        var code = e.keyCode;
        if (code == 37) {
            dir.left = false;
        }
        if (code == 39) {

            dir.right = false
        }
        if (code == 38) {
            dir.top = false;
        }
        if (code == 40) {
            dir.bottom = false;
        }
    }
    var x = 380;
    var y = 550;
    var width = 150;
    var height = 30;

    requestAnimationFrame(lineMove);

    function lineMove() {
        if (dir.left) {
            x -= 10;
        }
        if (dir.right) {
            x += 10;
        }
        if (dir.top) {
            y -= 10;
        }
        if (dir.bottom) {
            y += 10;

        }
        createLine(x, y);
        collisionCheck(x, y)
        requestAnimationFrame(lineMove);
    }
    createLine(x, y);

    function collisionCheck(x, y) {
        var top1 = y,
            bottom1 = top1 + height,
            left1 = x,
            right1 = left1 + width
        for (var item of ballArr) {
            var top2 = item.y - item.r,
                bottom2 = top2 + item.r,
                left2 = item.x - item.r,
                right2 = left2 + item.r
            if (top1 < bottom2 && top2 < bottom1 && left1 < right2 && left2 < right1) {
                alert('碰撞');
                location.href = location.href;
            }
        }
    }

    function createLine(x, y) {
        ctx.fillStyle = 'black';
        ctx.fillRect(x, y, width, height);
    }

    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function getColor() {
        return `rgb(${getRandom(0,256)},${getRandom(0,256)},${getRandom(0,256)})`;
    }
    </script>
</body>

</html>